<template>
    <div>
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-search v-model="valuess" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
        <div v-show="ym">
            <van-tag type="primary">标签</van-tag>
            <van-tag type="success">标签</van-tag>
            <van-tag type="danger">标签</van-tag>
            <van-tag type="warning">标签</van-tag>
        </div>
        <div v-show="!ym">
            <div v-for="item in searchApiData">
                <van-card :price="item.goods_price" :title="item.goods_name"
                    :thumb="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
            </div>
            <van-empty description="描述文字" v-show="km" />
        </div>
    </div>
</template>

<script setup>
const onClickLeft = () => history.back();
import { ref, watch } from 'vue';
let ym = ref(true)
let km = ref(false)
let valuess = ref('')
import { useRoute } from 'vue-router';
let route = useRoute()
console.log(route.params.query);
import { searchApi } from '@/api/api';
let searchApiData = ref([])
watch(valuess, (val) => {
    if (val.length == 0) {
        ym.value = true
        km.value = false
    } else {
        ym.value = false
        searchApi(route.params.query).then(res => {
            searchApiData.value = res.data.message.goods
            console.log(res);
            if (searchApiData.value.length == 0) {
                km.value = true
            } else {
                km.value = false
            }
        })
    }
})

</script>

<style lang="scss" scoped></style>